<template>
  <div class="banner" :style="{height:itemHeight+'px'}">
    <div
      ref="banner"
      :style="bannerStyle"
      @touchstart="touchstart($event)"
      @touchmove="touchmove($event)"
      @touchend="touchend($event)"
      class="list"
    >
      <div
        class="item"
        v-for="(item,index) in datalist"
        :key="index"
        :style="{width:`${itemWidth}px`}"
      >{{index}}</div>
    </div>
    <div class="progress">
      <div
        class="progress_item"
        v-for="(item,index) in datalist"
        :key="index"
        :class="{'select':index==displayIndex}"
        @click="displayIndex=index"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  computed: {
    optionsStyle() {
      return {
        width: "0px",
        height: "0px",
        transitionDuration: 0,
        transform: "translate(0,0)",
        ...this.bannerStyle,
      };
    },
  },
  data() {
    return {
      datalist: [1, 2, 3],
      transitionDuration: "200ms", // 滑动动画时间
      bannerStyle: {},
      itemWidth: 0, // 轮播图的宽度
      itemHeight: 0, // 轮播图的高度
      displayIndex: 0, // 当前展示的轮播图的索引
      slidePosition: "left",
      transitionendCallback: () => {},
    };
  },
  watch: {
    displayIndex() {
      setTimeout(() => {
        if (this.displayIndex >= 0) {
          this.bannerStyle = {
            width: this.itemWidth * (this.datalist.length + 1) + "px",
            height: this.itemHeight + "px",
            transitionDuration: this.transitionDuration,
            transform:
              "translate(" + -this.displayIndex * this.itemWidth + "px,0)",
          };
          this.transitionendCallback = function () {
            this.bannerStyle.transitionDuration = "0s";
            if (this.displayIndex >= this.datalist.length) {
              this.bannerStyle.transitionDuration = "0s";
              this.bannerStyle.transform = "translate(0,0)";
              this.displayIndex = 0;
            }
          };
        } else {
          this.displayIndex = 0;
        }
      }, 0);
    },
  },
  created() {
    this.$nextTick(() => {
      this.computeWidthHeight();
      this.bannerStyle = {
        width: this.itemWidth * (this.datalist.length + 1) + "px",
        height: this.itemHeight + "px",
        transitionDuration: "0",
        transform: "translate(" + -this.displayIndex * this.itemWidth + "px,0)",
      };
      //完成过渡后触发
      this.$refs.banner.addEventListener(
        "transitionend",
        () => {
          this.transitionendCallback();
        },
        false
      );
      // 窗口变化触发
      window.onresize = () => {
        this.computeWidthHeight();
      };
    });
  },
  methods: {
    computeWidthHeight() {
      this.itemWidth = window.innerWidth;
      this.itemHeight = window.innerHeight;
    },
    touchstart(e) {
      this.startTime = new Date().getTime();
      if (e.touches.length === 1) {
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
      }
    },
    touchmove(e) {
      if (e.touches.length === 1) {
        // 滑动时距离浏览器左侧的距离
        this.moveX = e.touches[0].clientX;
        this.disX = this.startX - this.moveX;

        if (this.disX < 0) {
          // 右滑
          this.slidePosition = "right";

          if (this.displayIndex <= 0) {
            // 在最左边不许往右滑动
            console.log(11);
          } else {
            this.bannerStyle = {
              width: this.itemWidth * (this.datalist.length + 1) + "px",
              height: this.itemHeight + "px",
              transitionDuration: "0",
              transform:
                "translate(" +
                (-this.displayIndex * this.itemWidth - this.disX) +
                "px,0)",
            };
          }
        } else {
          // 左滑
          this.slidePosition = "left";
          if (this.displayIndex + 1 >= this.datalist.length) {
            console.log(222);
            // 在最右边不许往左滑动
          } else {
            this.bannerStyle = {
              width: this.itemWidth * (this.datalist.length + 1) + "px",
              height: this.itemHeight + "px",
              transitionDuration: "0",
              transform:
                "translate(" +
                (-this.displayIndex * this.itemWidth - this.disX) +
                "px,0)",
            };
          }
        }
      }
    },
    touchend() {
      this.endTime = new Date().getTime();
      // if (Math.abs(this.moveX - this.startX) > this.itemWidth / 10) {
      //滑动距离大于50就移动
      if (Math.abs(this.moveX - this.startX) > 50) {
        // 移动
        if (this.slidePosition === "left") {
          if (this.displayIndex + 1 >= this.datalist.length) {
            return false;
          }
          this.displayIndex++;
        } else {
          this.displayIndex--;
        }
      } else {
        // 不移动
        this.bannerStyle = {
          width: this.itemWidth * (this.datalist.length + 1) + "px",
          height: this.itemHeight + "px",
          transitionDuration: "200",
          transform:
            "translate(" + -this.displayIndex * this.itemWidth + "px,0)",
        };
        this.transitionendCallback = function () {
          this.bannerStyle.transitionDuration = "0";
        };
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  overflow: hidden;
  .list {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: pink;
    .item {
      float: left;
      background-color: red;
      height: 200px;
    }
  }
  .progress {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
    .progress_item {
      display: inline-block;
      margin-right: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: blue;
      &.select {
        background: #fff;
      }
    }
  }
}
</style>